<h1 class="demo-title">红点</h1>

<div class="demo-panel">

    <div class="dot dot-red dot-lg dot-right-top">内容内容</div>
    <div class="dot dot-red dot-right-top">内容内容</div>
    <div class="dot dot-red dot-sm dot-right-top">内容内容</div>
    <p class="lh20">内容内容<i class="dot dot-red"></i></p>

    <br><br> <p>对应的html代码如下：</p>

    <pre lang-prism class="language-html">
    <code class="language-html">
        &lt;div class="dot dot-red dot-lg dot-right-top"&gt;内容内容&lt;/div&gt;
        &lt;div class="dot dot-red dot-right-top"&gt; 内容内容 &lt;/div&gt;
        &lt;div class="dot dot-red dot-sm"&gt;内容内容 &lt;/div&gt;
        &lt;p&gt;内容内容&lt;i class="dot dot-red"&gt;&lt;/i>&lt;/p&gt;
    </code>
    </pre>

    <!--<textarea class="prehtml-textarea" cols="60" rows="4">-->
        <!--<div class="dot dot-red dot-lg">内容内容</div>-->
        <!--<div class="dot dot-red">内容内容</div>-->
        <!--<div class="dot dot-red dot-sm">内容内容</div>-->
    <!--</textarea>-->
</div>